<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>睿米商城-结算页面</title>
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!--header-->
<div class="header">
    <div class="wrap clearfix">
        <a href="./" class="logo"><img src="./img/logo.png" alt="logo"></a>
        <div class="mainnav clearfix">
            <div class="nav-item cur">
                <a href="" class="nav-item-link">首页</a>
            </div>
            <div class="nav-item">
                <a href="" class="nav-item-link">无线吸尘器</a>
                <div class="categoryBox">
                    <div class="categoryBar wrap">
                        <div class="nav-goodsItems">
                            <a href="" class="nav-goodsItem">
                                <div class="imgBox"><img src="./img/goods-pic01.png" alt=""></div>
                                <div class="goodsDesc">无线手持吸尘器</div>
                            </a>
                            <a href="" class="nav-goodsItem">
                                <div class="imgBox"><img src="./img/goods-pic02.png" alt=""></div>
                                <div class="goodsDesc">无线手持除螨仪</div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="nav-item">
                <a href="" class="nav-item-link">车载净化器</a>
            </div>
            <div class="nav-item">
                <a href="" class="nav-item-link">车品系列</a>
            </div>
            <div class="nav-item">
                <a href="" class="nav-item-link">配件商城</a>
            </div>
            <div class="nav-item">
                <a href="" class="nav-item-link">睿米资讯</a>
            </div>
            <div class="nav-item">
                <a href="" class="nav-item-link">了解睿米</a>
            </div>
        </div>
        <div class="userInfoBox">
            <div class="userInfo">
                <div class="user">
                    <div class="userImg"><img src="./img/user.png" alt=""></div>
                    <div class="panel-hint">
                        <a href="">登陆</a>
                        <a href="">注册</a>
                    </div>
                </div>
                <div class="carts">
                    <div class="cartImg"><img src="./img/cart.png" alt=""></div>
                    <div class="cartCount">2</div>
                </div>
                <a href="" class="language"><img src="./img/language.png" alt=""></a>
            </div>
        </div>
    </div>
</div>

<!--主内容-->
<!--当前订单step-->
<div class="detail-steps step2">
    <div class="step-path cur">购物车</div>
    <div class="step-path cur">确认订单</div>
    <div class="step-path">支付订单</div>
</div>
<div class="checkout-main">
    <form action="flow.php" method="post" name="theForm" id="theForm" onsubmit="return checkOrderForm(this)">
        <div class="checkoutBox">
            <div class="addressTitle">收货地址</div>
            <div class="addressBox" id="addressBox">
                <input type="hidden" name="address" id="address" value="0">
                <div class="singleAddressBox" id="0">
                    <div class="name">张先生<span class="addrCity">江苏无锡</span></div>
                    <div class="addressMobileInfo">139****5412</div>
                    <div class="addressInfo">惠山区 绿地世纪城999号2002室</div>
                    <div class="operationArea">
                        <span class="isDefault">默认地址</span>
                        <a class="deleteAddress">删除</a>
                        <a class="modifyLink">修改</a>
                    </div>
                </div>
                <div class="singleAddressBox" id="1">
                    <div class="name">马先生<span class="addrCity">江苏无锡</span></div>
                    <div class="addressMobileInfo">156****5970</div>
                    <div class="addressInfo">惠山区 华府庄园001号1001室</div>
                    <div class="operationArea">
                        <span class="isDefault">默认地址</span>
                        <a class="deleteAddress">删除</a>
                        <a class="modifyLink">修改</a>
                    </div>
                </div>
                <div class="moreAddressBox">
                    <div class="imgBox"><img src="https://files.roborock.com/images/addAddress.png"></div>
                    <div class="addMore">添加新地址</div>
                </div>
                <div class="blank"></div>
            </div>
            <div class="blank"></div>
            <div class="payMethodBox">
                <div class="payMethodTitle">支付方式</div>
                <div class="payMethod">在线支付（支持微信支付/支付宝）</div>
                <input type="hidden" name="payment" id="payment" value="0">
            </div>
            <div class="blank"></div>

            <div class="splitter" style="margin: 36px 0;"></div>
            <div class="deliverBox">
                <div class="deliverMethodTitle">配送方式</div>
                <div class="deliverMethod">快递配送（运费10元，满99元包邮）</div>
            </div>
            <div class="blank"></div>

            <div class="splitter" style="margin: 36px 0;"></div>
            <div class="deliverBox">
                <div class="deliverMethodTitle">配送时间</div>
                <input type="hidden" name="deliverMethod" id="deliverMethod" value="不限送货时间：周一至周日">
                <input type="button" class="deliverTime on" value="不限送货时间：周一至周日">
                <input type="button" class="deliverTime" value="工作日送货：周一至周五">
                <input type="button" class="deliverTime" value="双休日、假日送货：周六至周日">
            </div>
            <div class="blank" style="display:none"></div>

            <div class="splitter" style="margin: 36px 0;"></div>
            <div class="deliverBox">
                <input type="hidden" name="inv_type" id="inv_type" value="0">
                <input type="hidden" name="inv_mode" id="inv_mode" value="0">
                <div class="invoiceTitle">发票信息</div>
                <div class="invoiceBox">
                    <input type="button" class="invoice on" value="电子发票(非纸质)">
                    <input type="button" class="invoice" value="普通发票(纸质)">
                    <div class="clear0"></div>
                    <input type="button" class="invoice_mode on" style="margin-top: 20px;" value="个人">
                    <input type="button" class="invoice_mode" style="margin-top: 20px;" value="单位">
                    <div class="clear0"></div>
                    <div><input type="text" name="inv_payee" id="inv_payee" class="invoicePayee" placeholder="姓名或发票抬头"></div>
                    <div><input type="text" style="display:none;" name="inv_content" id="inv_content" class="invoicePayee" placeholder="单位税号"></div>
                    <div class="invoiceInfo">发票内容：购买商品明细</div>
                    <div class="invoiceDescription">电子发票与纸制质票具有相同法律效力，开具后将以短信形式推送至预留手机号码供查询下载。</div>
                    <div class="invoiceDescription" style="margin-top: 0;color:#eb0028;visibility:hidden;">如需专用发票，请直接联系客服处理。</div>
                </div>
            </div>
            <div class="blank"></div>

            <div class="goodInfoTitleDiv">
                <div class="goodInfoTitle">商品及优惠券</div>
                <a class="backToCart" href="flow.php?step=cart&amp;type=0">返回购物车 &gt;</a>
            </div>
            <div class="splitter" style="margin-top: 13px;"></div>

            <table border="0" cellpadding="1" cellspacing="1" class="checkoutGoods">
                <tbody>
                <tr>
                    <td class="goodsPic">
                        <a href="" target="_blank" class="f6"><img src="img/goods-pic01.png"></a>
                    </td>
                    <td>
                        <a href="" target="_blank">无线手持吸尘器 x 1</a>
                    </td>
                    <td class="goodsPrice">￥1699.00</td>
                </tr>
                </tbody>
            </table>
            <div class="coupon">
                <div class="couponText">使用优惠券</div>
                <a href="javascript:void (0);" class="couponImg"></a>
            </div>
            <div class="bonusBox slideDown" id="bonusBox">
                <input type="hidden" name="bonus_id" id="bonusId" value="0">
                <div id="bonusInfoBox">
                    <div class="singleBonus" id="noneBonus">
                        不使用红包
                    </div>
                    <div class="singleBonus">
                        <div class="info" style="background: url('https://files.roborock.com/images/bonus.png') no-repeat center center;">
                            <div class="amountInfo">
                                <div class="unit">¥</div>
                                <div class="amount">200.00</div>
                            </div>
                            <div class="clear0"></div>
                            <div class="tip">不限额使用</div>
                            <div class="dateInfo">2018.06.16-2018.06.18</div>
                        </div>
                        <div class="otherInfo">限品类：无线手持吸尘器</div>
                    </div>
                    <div class="singleBonus bonusDisable">
                        <div class="info" style="background: url('https://files.roborock.com/images/bonus_disable.png') no-repeat center center;">
                            <div class="amountInfo">
                                <div class="unit">¥</div>
                                <div class="amount">200.00</div>
                            </div>
                            <div class="clear0"></div>
                            <div class="tip">不限额使用</div>
                            <div class="dateInfo">2018.06.16-2018.06.18</div>
                        </div>
                        <div class="otherInfo">限品类：无线手持除螨仪</div>
                    </div>
                </div>
                <div class="clear0"></div>
                <div class="addCoupon">
                    <div style="float:left;"><img class="addCouponImg" src="https://files.roborock.com/images/coupon.png"></div>
                    <div class="addCouponText">添加优惠券</div>
                </div>
                <div class="clear0"></div>
            </div>
            <input type="hidden" name="vip_code" id="vip_code" value="">
            <div class="cart_summaryInfo">
                <div class="cart_summaryInfoTitle">商品件数：</div>
                <div class="cart_summaryInfoNumber">1件</div>
            </div>
            <div class="cart_summaryInfo">
                <div class="cart_summaryInfoTitle">金额合计：</div>
                <div class="cart_summaryInfoNumber">2499.00元</div>
            </div>
            <div class="cart_summaryInfo">
                <div class="cart_summaryInfoTitle">优惠抵扣：</div>
                <div class="cart_summaryInfoNumber" id="bonusInfo">-0.00元</div>
            </div>
            <div class="cart_summaryInfo">
                <div class="cart_summaryInfoTitle">运费：</div>
                <div class="cart_summaryInfoNumber" id="shipping_fee">0.00元</div>
            </div>
            <div class="cart_summaryInfo">
                <div class="cart_summaryInfoTitle">应付总额：</div>
                <div class="cart_summaryInfoNumber" id="totalAmount">1699.00&nbsp;元</div>
            </div>
            <div class="blank"></div>
            <input class="confirm" type="submit" value="去结算">
            <div class="clear0"></div>
        </div>
    </form>
</div>
<!--footer-->
<div class="footer">
    <div class="wrap clearfix">
        <div class="saleDescription">
            <div class="policyArea">
                <div class="policy">
                    <img src="./img/official.png" alt="">
                    <span>官方直销</span>
                </div>
                <div class="policy">
                    <img src="./img/7days.png" alt="">
                    <span>7天无理由退货</span>
                </div>
                <div class="policy">
                    <img src="./img/deliver.png" alt="">
                    <span>满99元包邮</span>
                </div>
                <div class="policy">
                    <img src="./img/quality.png" alt="">
                    <span>1年质保</span>
                </div>
            </div>
        </div>
        <div class="foot-help">
            <div class="ddBox">
                <dl>
                    <dt class="xs-1">新手指南</dt>
                    <dd><a href="" title="注册/登录">注册/登录</a></dd>
                    <dd><a href="" title="账号管理">账号管理</a></dd>
                    <dd><a href="" title="找回密码">找回密码</a></dd>
                </dl>
                <dl>
                    <dt class="xs-1">购买帮助</dt>
                    <dd><a href="" title="购买流程">购买流程</a></dd>
                    <dd><a href="" title="支付方式">支付方式</a></dd>
                    <dd><a href="" title="发票说明">发票说明</a></dd>
                </dl>
                <dl>
                    <dt class="xs-1">售后服务</dt>
                    <dd><a href="" title="售后政策">售后政策</a></dd>
                    <dd><a href="" title="退换货流程">退换货流程</a></dd>
                    <dd><a href="" title="售后地址">售后地址</a></dd>
                </dl>
                <dl>
                    <dt class="xs-1">了解睿米</dt>
                    <dd><a href="" title="公司简介">公司简介</a></dd>
                    <dd><a href="" title="发展流程">发展历程</a></dd>
                    <dd><a href="" title="公司荣誉">公司荣誉</a></dd>
                </dl>
                <dl>
                    <dt class="xs-1">关注我们</dt>
                    <dd><a href="" title="官方微博">官方微博</a></dd>
                    <dd><a href="" title="官方微信">官方微信</a></dd>
                    <dd><a href="" title="应用下载">应用下载</a></dd>
                </dl>
            </div>
            <div class="foot-service">
                <div class="service-tit">服务热线</div>
                <div class="phone">4006-138-096</div>
                <div class="service-time">周一至周六 8:30-18:00</div>
            </div>
        </div>
        <div class="footer-info">&copy;2014 www.roidmi.com All Rights Reserved 苏ICP备15050132号</div>
    </div>
</div>
<!--添加收货地址-->
<div id="newAddressDiv">
    <form name="newAddressForm" class="newAddressBox" id="newAddressForm" onsubmit="return false;">
        <div class="addressHead">
            <div id="addressTitle"><span>收货地址</span></div>
            <div class="addressClose"></div>
        </div>
        <div class="addressDetailBox">
            <input name="address_id" type="hidden" value="0">
            <div class="addressDetailItemBox" style="margin-top:10px;">
                <div class="addressDetailTitle"><font style="color: red">*&nbsp;</font>收货人:</div>
                <input name="consignee" type="text">
            </div>
            <div style="overflow: hidden;">
                <div class="addressDetailItemBox" style="float:left;margin-right:20px;">
                    <select name="country" id="selCountries">
                        <option value="0">中国</option>
                    </select>
                </div>
                <div class="addressDetailItemBox" style="float:left;margin-right:20px;">
                    <select name="province" id="selProvinces">
                        <option value="0">请选择</option>
                    </select>
                </div>
                <div class="addressDetailItemBox" style="float:left;margin-right:20px;">
                    <select name="city" id="selCities">
                        <option value="0">请选择</option>
                    </select>
                </div>
                <div class="clear0"></div>
            </div>
            <div class="addressDetailItemBox">
                <div class="addressDetailTitle"><font style="color: red">*&nbsp;</font>详细地址:</div>
                <input name="address" type="text" style="width:400px;">
            </div>
            <div>
                <div class="addressDetailItemBox" style="float:left;margin-right:20px;">
                    <div class="addressDetailTitle"><font style="color: red">*&nbsp;</font>手机号码:</div>
                    <input name="mobile" type="text">
                </div>
                <div class="addressDetailItemBox" style="float:left;margin-right:20px;">
                    <div class="addressDetailTitle">&nbsp;</div>
                    <div style="margin-top:10px;height:30px;line-height:30px;font-size:12px;">或</div>
                </div>
                <div class="addressDetailItemBox" style="float:left;margin-right:20px;">
                    <div class="addressDetailTitle">固定电话:</div>
                    <input name="tel" type="text">
                </div>
                <div class="clear0"></div>
            </div>
            <div class="addressDetailItemBox">
                <div class="addressDetailTitle">邮编:</div>
                <input name="zipcode" type="text">
            </div>
            <input type="button" value="保存收货地址" class="submitButton">
        </div>
    </form>
</div>
<!--添加优惠券-->
<div id="addBonusDiv">
    <form name="addBonusFrm" class="addBonusBox" action="user.php" method="post" onsubmit="return false;">
        <div class="addBonusHead">
            <div id="addBonusTitle"><span>添加优惠券</span></div>
            <div class="addBonusClose"></div>
        </div>
        <div class="addBonusInfoBox">
            <div><input type="text" class="bonusNo" name="bonus_sn" value=""></div>
            <input type="button" class="confirmNoBox" value="提交">
        </div>
    </form>
</div>
<script type="text/javascript" src="./js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="./js/region.js"></script>
<script type="text/javascript" src="./js/js.js"></script>
<script type="text/javascript">
    $(function () {
        // 选择默认地址
        $('.singleAddressBox').each(function () {
            $(this).find('.isDefault').on('click', function () {
                $('.singleAddressBox').removeClass('on');
                $(this).parent().parent().addClass('on')
            });
        });
        // 添加新的收货地址
        $('.moreAddressBox').on('click', function () {
            $('#newAddressDiv').show();
        });
        // 关闭添加新的收货地址
        $('.addressClose').on('click', function () {
            $('#newAddressDiv').hide();
        });
        // 选择配送时间
        $('.deliverTime').on('click', function () {
            $(this).addClass('on').siblings().removeClass('on');
        });
        // 显示发票
        $('.invoice').on('click', function () {
            $(this).addClass('on').siblings('.invoice').removeClass('on');
            $('#inv_type').val($(this).index());
        });
        $('.invoice_mode').on('click', function () {
            $(this).addClass('on').siblings('.invoice_mode').removeClass('on');
            $('#inv_mode').val($(this).index()-3);
            if ($(this).index() == 4) {
                $('#inv_content').show();
            } else {
                $('#inv_content').hide();
            }
        });
        // 显示优惠券
        $('.couponImg').on('click', function () {
            $('#bonusBox').fadeToggle();
        });
        // 使用优惠券
        $('.singleBonus').on('click', function () {
            if ($(this).hasClass('bonusDisable')) {
                return false;
            } else {
                $(this).addClass('on').siblings().removeClass('on');
            }
        });
        // 添加优惠券
        $('.addCoupon').on('click', function () {
            $('#addBonusDiv').show();
        });
        // 关闭添加优惠券
        $('.addBonusClose').on('click', function () {
            $('#addBonusDiv').hide();
        });
    });
</script>
</body>
</html>